<template>
    <div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" immediate-check="false">
            <van-list v-model="loading" :finished="finished" :finished-text='!haveWFQDError ? "没有更多数据" : ""'
                :error-text="wfqdErrorMessage" @load="onLoad" style="margin-bottom: 50px;">
                <van-cell v-for="(item, index) in list5" :key="index" @click="pushDetailView(item)">
                    <div class="titlefont"> {{ item.title }}</div>
                    <div class="infosfont"> 发起时间:{{ item.createdTime }}</div>
                    <div class="infosfont"> 填报时间:{{ item.modifiedTime }}</div>
                    <div class="infosfont"> 填报人:{{ item.submitUser }}</div>
                    <div class="infosfont"> 填报人组织:{{ item.belongOrg }}</div>
                    <div class="infosfont"> 填报状态:{{ item.isSubmit == 1?'已填报':'未填报' }}</div>
                    <div class="infosfont"> 填报内容:{{ item.submitText }}</div>
                    <div class="infosfont"> 任务描述:{{ item.description}}</div>
                    <!-- <div class="infosfont"> 填报附件: {{ item.isSubmitNumber }}/{{ item.numbers }}</div> -->

                </van-cell>
                <div v-show="!haveWFQDData" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                        style="margin: 120px 50px 0" @click="getListdata('draw')" />
                </div>

                <div v-show="haveWFQDError" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')" alt="获取数据失败"
                        style="margin: 120px 50px 0" @click="getListdata('draw')" />
                    <div class="color-b font14" style="margin: 20px 0 0 15px">
                        获取数据失败!
                    </div>
                </div>
            </van-list>

        </van-pull-refresh>

    </div>
</template>



<script>
import { getWFQDDetailList } from "@/api/zsapi";
import { Notify } from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
    name: 'wfqdDetailView',
    data() {
        return {

            params: this.$route.query,

            list5: [],
            refreshing: false,
            loading: false,
            finished: false,
            getWFQDListQuery: { source: "MOBILE", page: 1, rows: 10, size: 10 },
            maxPageWFQD: 100,
            wfqdErrorMessage: '',
            haveWFQDData: true,
            haveWFQDError: false
        }
    },

    /// 不知道啥意思
    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),
    },

    /// 一个页面 激活 后的钩子函数
    activated() {

    },

    /// 创建完成
    created() {

    },

    /// 挂载完成
    mounted() {

    },

    /// 所有的 方法
    methods: {

        /// 我发起的任务 刷新
        onRefresh() {
            //清空列表数据
            this.finished = false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading = true;
            this.refreshing = true;
            this.getWFQDListQuery.page = 1;
            this.maxPageWFQD = 100;
            this.onLoad();
        },

        onLoad() {
            if (this.refreshing) {
                this.list5 = [];
                this.refreshing = false;
            }

            if (this.getWFQDListQuery.page <= this.maxPageWFQD) {
                getWFQDDetailList(Object.assign(this.getWFQDListQuery, { userName: this.user.userName }, { orderUuid: this.params.orderUuid })).then((result) => {

                    this.haveWFQDError = false;
                    if (!result.data) {
                        this.loading = false;
                        this.finished = true;
                        Notify(result.message);
                        this.wfqdErrorMessage = result.message;
                        return;
                    }

                    let listdetails = this.list5;
                    if (this.getWFQDListQuery.page == 1) {
                        listdetails = [];
                        if (result.data.data.content) {
                            listdetails = result.data.data.content;
                        }
                        if (listdetails.length == 0) {
                            this.haveWFQDData = false;
                        } else {
                            this.haveWFQDData = true;
                        }
                        this.maxPageWFQD = result.data.data.totalPages;
                    } else {
                        if (result.data.data.content) {
                            listdetails = listdetails.concat(result.data.data.content);
                        }
                    }
                    this.list5 = listdetails;
                    this.loading = false;
                    this.getWFQDListQuery.page = this.getWFQDListQuery.page + 1;
                })
                    .catch((error) => {
                        this.haveWFQDError = true;
                        this.haveWFQDData = true;
                        this.loading = false
                        this.finished = true;
                        this.wfqdErrorMessage = '获取数据失败,请稍后重试';
                        Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    })
            } else {
                this.loading = false
                this.finished = true;
            }
        },

        timeUtil(value) {
            return moment(value).format('YYYY-MM-DD HH:mm:ss');
        },

        /// 跳转详情
        pushDetailView(value) {

            this.$router.push(
                {
                    name: 'zsdetailview',
                    query: {
                        id: value.id,
                        workFlag: 'join',
                        todoType: '2',
                        isdraw: '0'
                    }
                }
            )
        }
    }
}



</script>


<style scoped>
.btn {
    margin-bottom: 60px;
    margin-top: 60px;
}

.titlefont {
    font-size: 15px;
}

.infosfont {
    font-size: 12px;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>